/**
 * 设计方案放大预览模态框
 */

import React from 'react';
import { DesignSchema } from '../types';
import SchemaRenderer from './SchemaRenderer';

interface DesignModalProps {
  design: DesignSchema;
  onClose: () => void;
  onSelect: () => void;
}

const DesignModal: React.FC<DesignModalProps> = ({ design, onClose, onSelect }) => {
  return (
    <>
      {/* 遮罩层 */}
      <div
        onClick={onClose}
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          zIndex: 10000,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          animation: 'fadeIn 0.2s ease',
        }}
      >
        {/* 模态框内容 */}
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            backgroundColor: '#fff',
            borderRadius: '12px',
            width: '80%',
            maxWidth: '900px',
            maxHeight: '85vh',
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
            animation: 'slideIn 0.3s ease',
          }}
        >
          {/* 头部 */}
          <div
            style={{
              padding: '20px',
              borderBottom: '1px solid #e8e8e8',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <div>
              <h3 style={{ margin: 0, fontSize: '18px', color: '#333' }}>
                {design.title}
              </h3>
              {design.description && (
                <p style={{ margin: '4px 0 0', fontSize: '14px', color: '#666' }}>
                  {design.description}
                </p>
              )}
            </div>
            <button
              onClick={onClose}
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '50%',
                border: 'none',
                background: '#f5f7fa',
                cursor: 'pointer',
                fontSize: '18px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                transition: 'background 0.2s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = '#e8e8e8';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = '#f5f7fa';
              }}
            >
              ✕
            </button>
          </div>

          {/* 预览区域 */}
          <div
            style={{
              flex: 1,
              overflow: 'auto',
              backgroundColor: '#f5f7fa',
              padding: '20px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <div
              style={{
                width: '100%',
                maxWidth: '600px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                overflow: 'hidden',
              }}
            >
              <div style={{ width: '100%', height: '500px', padding: '20px' }}>
                {/* 传递 design 对象，包含正确的 id */}
                <SchemaRenderer schema={design} />
              </div>
            </div>
          </div>

          {/* 底部操作栏 */}
          <div
            style={{
              padding: '16px 20px',
              borderTop: '1px solid #e8e8e8',
              display: 'flex',
              gap: '12px',
              justifyContent: 'flex-end',
            }}
          >
            <button
              onClick={onClose}
              style={{
                padding: '8px 20px',
                border: '1px solid #e8e8e8',
                borderRadius: '6px',
                background: '#fff',
                color: '#333',
                cursor: 'pointer',
                fontSize: '14px',
                transition: 'all 0.2s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = '#f5f7fa';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = '#fff';
              }}
            >
              取消
            </button>
            <button
              onClick={onSelect}
              style={{
                padding: '8px 24px',
                border: 'none',
                borderRadius: '6px',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: '#fff',
                cursor: 'pointer',
                fontSize: '14px',
                fontWeight: 'bold',
                transition: 'opacity 0.2s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.opacity = '0.9';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.opacity = '1';
              }}
            >
              选择此方案
            </button>
          </div>
        </div>
      </div>

      {/* CSS 动画 */}
      <style>
        {`
          @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
          }
          @keyframes slideIn {
            from {
              opacity: 0;
              transform: scale(0.95) translateY(20px);
            }
            to {
              opacity: 1;
              transform: scale(1) translateY(0);
            }
          }
        `}
      </style>
    </>
  );
};

export default DesignModal;
